<template>
    <view class="group-list-main">
        <view class="head-nav">
            <view v-for="(item, index) in tablist" :key="index" class="head-content" @click="checkIndex(index)">
                <view :class="queryInfo.orderStatus == index ? 'active' : 'common'">{{ item.name }}</view>
                <view v-show="queryInfo.orderStatus == index" class="head-line"></view>
            </view>
        </view>
        <view v-if="Data.goodsList.length">
            <groupBuy
                v-for="item in Data.goodsList"
                :key="item.groupOrderId"
                :goodsMes="item"
                :currentIndex="queryInfo.orderStatus" />
        </view>
        <view v-else class="no-list">
            <image :src="getImgOssUrl('/ui-prod-2.0.0/order_img_2.0.png')" class="no-list-img" />
            <view class="no-list-text">您还没有相关订单</view>
        </view>
        <view class="list-loading">
            {{ isBottom && Data.goodsList.length ? (listLoading ? '加载中…' : '已经到底啦！') : '' }}
        </view>
        <Loading />
    </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import router from '@/router';
import { onShow, onReachBottom, onPageScroll, onPullDownRefresh, onShareAppMessage } from '@dcloudio/uni-app';
import request from '@/request';
import { getImgOssUrl } from '@/commons/utils.js';
import groupBuy from '@/components/groupBuy';
import Loading from '@/components/el-loading';

const tablist = [
    { name: '拼团中', code: 0 },
    { name: '拼团成功', code: 1 },
    { name: '拼团失败', code: 2 }
];

const queryInfo = reactive({
    page: 1,
    perPage: 10,
    orderStatus: 0
});

let listLoading = ref(false);

const Data = reactive({
    goodsList: [],
    scrollTop: 0,
    totalCount: 0
});

const isBottom = computed(() => {
    return Data.scrollTop > 50;
});

onPageScroll(e => {
    Data.scrollTop = e.scrollTop;
});

onShow(() => {
    getGoodsList();
});

// 上拉加载
onReachBottom(() => {
    if (Data.totalCount === Data.goodsList.length) {
        return;
    }
    queryInfo.page++;
    getGoodsList();
});

const getGoodsList = async () => {
    listLoading.value = true;
    const { page, perPage } = queryInfo;
    try {
        let res = await request('spellList', {
            page,
            perPage,
            status: queryInfo.orderStatus + 1
        });
        let list = res.data.list || [];

        if (page === 1) {
            Data.goodsList = list;
        } else {
            Data.goodsList = Data.goodsList.concat(list);
        }
        listLoading.value = false;
        Data.totalCount = res.data.totalCount;
    } catch (error) {
        uni.showToast({
            title: error.data.msg,
            icon: 'none',
            duration: 2000
        });
    }
};

onPullDownRefresh(() => {
    queryInfo.page = 1;
    getGoodsList();
    uni.pageScrollTo({ scrollTop: 0 });
    setTimeout(function () {
        uni.stopPullDownRefresh();
    }, 500);
});

const checkIndex = index => {
    queryInfo.page = 1;
    queryInfo.orderStatus = tablist[index].code;
    getGoodsList();
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
    });
};

onShareAppMessage(res => {
    const { coverImg, goodsName, spellOrderId, activityId, goodsId, shopId } = res.target.dataset.item;
    return {
        title: `【快来和我一起拼单吧】${goodsName}`,
        path: `/pages-cart/group/index?from=card&spellOrderId=${spellOrderId}&goodsId=${goodsId}&shopId=${shopId}&activityId=${activityId}`,
        imageUrl: coverImg || getImgOssUrl('/ui-prod-2.0.0/errorImg.png')
    };
});
</script>
<style lang="scss" src="./list.scss" scoped></style>
